<template>
  <div>
    <Drawer
      ref="modal"
      :title="`${editType === 'create' ? $t('staffIndex.staffDepartmentAdd') : $t('staffIndex.staffDepartmentEdit')}`"
      :width="500"
      :value="show"
      :beforeClose="$_modal_decideIfClose"
    >
      <Form
        ref="form"
        :labelWidth="130"
        :model="formData"
        :rules="formRule"
      >
        <FormItem prop="departName" :label="$t('staffIndex.staffDepartmentName')">
          <Input v-model="formData.departName" :placeholder="$t('staffIndex.staffDepartmentNameHint')" />
        </FormItem>
        <FormItem prop="departOrder" :label="$t('staffIndex.staffDepartmentNameSolt')">
          <InputNumber
            v-model="formData.departOrder"
            :min="0"
            :step="1"
            :style="{ width: '100px' }"
          />
        </FormItem>
        <FormItem prop="mobile" :label="$t('staffIndex.staffDepartmentPhone')">
          <Input v-model="formData.mobile" :placeholder="$t('staffIndex.staffDepartmentPhoneHint')" />
        </FormItem>
        <FormItem prop="memo" :label="$t('staffIndex.staffDepartmentRemark')">
          <Input
            v-model="formData.memo"
            :placeholder="$t('staffIndex.staffDepartmentRemarkInput')"
            type="textarea"
            :rows="4"
          />
        </FormItem>
        <FormItem class="glo-btn-group">
          <Button
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >{{ $t("devicesCreate.devCreateSubmit") }}</Button>
          <Button
            @click="$_modal_close"
          >{{ $t("devicesCreate.devCreateCancel") }}</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import _ from 'lodash'

import modalMixin from '@/utils/mixins/modalMixin.js'
import {
  create,
  update,
} from '@/api/depart.js'

const DEFAULT_FORM = {
  departName: '',
  departOrder: 0,
  mobile: '',
  memo: '',
}

export default {
  mixins: [
    modalMixin,
  ],

  props: {
    editType: {
      type: String,
      default: 'create',
    },
    editItem: Object,
    parentDepart: [String, Number],
  },
  data () {
    return {
      formData: _.cloneDeep(DEFAULT_FORM),
      formRule: {
        departName: { required: true, message: this.$t('staffIndex.staffDepartmentNameHintN') },
      },
    }
  },

  mounted () {
    this.show = true
    if (this.editType === 'update') {
      const formData = {}
      const keys = Object.keys(DEFAULT_FORM)
      keys.forEach(key => {
        formData[key] = _.isUndefined(this.editItem[key])
          ? DEFAULT_FORM[key]
          : this.editItem[key]
      })
      formData.id = this.editItem.id
      this.formData = _.cloneDeep(formData)
    }
  },

  methods: {
    async handleSubmit () {
      const ifVlid = await this.$refs.form.validate()
      if (ifVlid && this.editType === 'create') {
        this.handleCreate()
      }
      if (ifVlid && this.editType === 'update') {
        this.handleUpdate()
      }
    },

    async handleCreate () {
      const formData = _.cloneDeep(this.formData)
      formData.parentId = this.parentDepart
      const { success } = await create(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateN'))
      }
    },
    async handleUpdate () {
      const formData = _.cloneDeep(this.formData)
      const { success } = await update(formData)
      if (success) {
        this.$Message.success(this.$t('devicesCreate.devCreateUpdateS'))
        this.ifUpdateUpper = true
        this.$_modal_close()
      } else {
        this.$Message.error(this.$t('devicesCreate.devCreateUpdateN'))
      }
    },
  },
}
</script>
